<template>
  <div class="content">
    <div class="mainList">
      <div>
        <!-- <van-search
          v-model="searchVal"
          show-action
          placeholder="关键字搜索"
          @search="onSearch"
        >
          <template #action>
            <div @click="onClickButton" class="searchBtn">
              <van-icon name="search" />
            </div>
          </template>
        </van-search> -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <div v-for="(item, index) in forumList" :key='index'>
            <div class="row">
              <div class="lCol">
                <van-image
                  round
                  width="1rem"
                  height="1rem"
                  :src="
                    item.account.img.anonymousFilePath
                      ? getUrl(item.account.img.anonymousFilePath)
                      : ''
                  "
                />
              </div>
              <div class="rCol">
                <div>
                  <span>{{ item.account.nickname }}</span>
                  <van-tag
                    round
                    color="#efefef"
                    text-color="#c0c0c0"
                    class="ml2"
                    >楼主</van-tag
                  >
                </div>
                <div class="mt2">
                  <span>{{ item.createdTime }}</span>
                  <span>发布</span>
                </div>
              </div>
            </div>
            <div class="infoBoxList">
              <div class="infoTitle" @click="getDetail(item.id,item.categoryName)" v-html="htmlDecode(item.content)">
                 
              </div>
              <div class="iconRow">
                <div class="iconCol">
                  <div><van-icon name="eye" size="0.4rem" /></div>
                  <div>{{ item.displayOrder }}</div>
                </div>
                <div class="iconCol" @click="showChatPopView(index)">
                  <div><van-icon name="chat" size="0.4rem" /></div>
                  <div>{{ item.commentCount }}</div>
                </div>
                <van-popup :overlay-style="{background:'rgba(255,255,255,0)'}" v-model="showChatPop"   position="bottom" :style="{ height: '112px',padding:'10px' }" > 
                  <div style="display:flex">
                    <van-field autosize rows="2" type="textarea" v-model="chatinfos" placeholder="评论" style="flex:1"
                      class="chatInput" >
                    </van-field>  
                  <div style="display:flex;flex-direction:column;">
                    <div style="display:flex;justify-content:center ">
                      <van-icon name="arrow-down" size="20px"  @click="showChatPop=false"/>
                    </div>
                  <van-checkbox v-model="anonymous" style="margin:5px">是否实名</van-checkbox>
                  <van-button type="primary" size="small" color="#F06F3F" style="margin:5px" 
                    @click="tosubmint(anonymous,chatinfos,commentTypeInfo1.id,'评论')">提交</van-button>
                  </div>
                  </div>
                </van-popup>
                <div
                  class="iconCol"
                  :class="item.isSupport ? 'colorOrange' : ''"
                >
                  <div @click="giveLike(item)">
                    <van-icon name="good-job" size="0.4rem" />
                  </div>
                  <div>{{ item.supportVO.isSupport }}</div>
                </div>
                <div
                  class="iconCol"
                  :class="item.isOppose ? 'colorOrange' : ''"
                >
                  <div @click="stepOn(item)">
                    <van-icon
                      name="good-job"
                      size="0.4rem"
                      style="transform: rotate(180deg)"
                    />
                  </div>
                  <div>{{ item.supportVO.isOppose }}</div>
                </div>
              </div>
              <div
                class="moreBtn"
                @click="getDetail(item.id,item.categoryName)"
                v-if="item.comments.length >= 5"
              >
                查看更多评论
              </div>
              <div class="commentList" v-if="item.comments.length > 0">
                <div
                  class="commentRow"
                  v-for="(commentItem, commentIndex) in item.comments"
                  :key="commentIndex"
                >
                  <div class="lText" @click="show1ChatPopView(index,commentIndex)">
                    <!-- <span>{{ commentItem.nickname }}回复{{ commentItem.fromTo }}：{{ htmlDecode(commentItem.content) }}</span> -->
                    <span class="colorOrange">{{ commentItem.nickname }}</span>
                      <span class="noemalText" v-if="commentItem.typeName == '评论'">：</span>
                        <span class="noemalText" v-if="commentItem.typeName == '回复'">回复</span>
                        <span
                        class="colorOrange"
                        v-if="commentItem.typeName == '回复'"
                        >{{ commentItem.fromTo }}：</span
                      >
                       <span
                        class="commentContent noemalText"
                        v-html="htmlDecode(commentItem.content)"
                      ></span>
                    
                   
                  
                  </div>
                   <van-popup :overlay-style="{background:'rgba(255,255,255,0)'}" v-model="show1ChatPop"  position="bottom" :style="{ height: '112px',padding:'10px' }" > 
                    <div style="display:flex">
                      <van-field autosize rows="2" type="textarea" v-model="chat1infos" placeholder="回复他人" style="flex:1"
                        class="chatInput" >
                      </van-field>  
                    <div style="display:flex;flex-direction:column;">
                      <div style="display:flex;justify-content:center ">
                        <van-icon name="arrow-down" size="20px"  @click="show1ChatPop=false"/>
                      </div>
                    <van-checkbox v-model="anonymous" style="margin:5px">是否实名</van-checkbox>
                    <van-button type="primary" size="small" color="#F06F3F" style="margin:5px" 
                      @click="tosubmint2(anonymous,chat1infos,commentTypeInfo2.id,'回复')">提交</van-button>
                    </div>
                    </div>
                  </van-popup>
                  <div class="rIcon" :class="commentItem.isSupport ? 'colorOrange' : ''">
                    <div @click="giveCommentLike(commentItem)">
                      <van-icon
                        name="good-job-o"
                        size="0.4rem"
                      />
                    </div>
                    <div>{{ commentItem.supportVO.isSupport }}</div>
                  </div>
                </div>
              </div>
            </div>
            <van-divider v-if="forumList.length!=(index+1)" :style="{  borderColor: '#ebedf0',margin: '0.25rem 0px 0px 0px' ,borderWidth: '6px 0 0'}"></van-divider>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { Notify } from "vant";
import {
  findAllForum,
  queryByType,
  supportCreate,
  deleteSupport,
  create
} from "@/api/colorfulLifeList.js";
import { findCurrentAccount } from "@/api/colorfulLife.js";
import { openFileUrl } from '@/store/openFile'
export default {
  name: "colorfulLifeList",
  data() {
    return {
      searchVal: "", //搜索关键字
      forumList: [],
      loading: false,
      finished: false,
      commentList: [
        {
          name1: "娟子",
          name2: "",
          text: "少年强则国强少年强则国强少年强则国强少年强则国强少年强则国强少年强则国强",
          num: 12111,
          isActive: true,
        },
        {
          name1: "妍妍",
          name2: "娟子",
          text: "加油",
          num: 2,
          isActive: false,
        },
        {
          name1: "娟子",
          name2: "妍妍",
          text: "天天向上",
          num: 3,
          isActive: true,
        },
        {
          name1: "妍妍",
          name2: "娟子",
          text: "为祖国加油",
          num: 4,
          isActive: false,
        },
        {
          name1: "李杰",
          name2: "娟子",
          text: "美丽祖国新气象",
          num: 5,
          isActive: true,
        },
      ],
      listQuery: {
        page: 1,
        rows: 10,
        size: 10,
        direction: "desc",
        properties: "isTop,modifiedTime",
      },
      totalPages: 0,
      categoryId: "", //二级栏目id
      topicId: "", //话题分类id
      commentTypeInfo1: {}, //评论类型信息(内容)
      commentTypeInfo2: {}, //评论类型信息(回复)
      supportTypeInfo1: {}, //点赞类型信息(内容)
      supportTypeInfo2: {}, //点赞类型信息(评论)
      titleType:'',
      chatinfos:'',
      showChatPop:false,
      anonymous:false,
      chat1infos:'',
      show1ChatPop:false,
      choseIndex:'',
      chosecommentIndex:'',
      userInfo:{}, //
    };
  },
  // watch: {
  //   $route(to, from) {
  //     this.categoryId = to.query.categoryId;
  //     this.topicId = to.query.topicId;
  //     this.onLoad();
  //   },
  // },
  computed: {
    ...mapGetters(["user"]),
  },
  activated() {
    this.listQuery.page=1
    this.titleType = this.$route.query.title;
    this.categoryId = this.$route.query.categoryId;
    this.topicId = this.$route.query.topicId;
    this.forumList = [];
    this.loading = false;
    this.finished = false;
    this.onLoad();
    this.getCurrentAccount();
    this.getCommentTypeInfo();
    this.getSupportTypeInfo();
  },
  // mounted() {
  //   this.categoryId = this.$route.query.categoryId;
  //   this.topicId = this.$route.query.topicId;
  //   this.onLoad();
  //   this.getCommentTypeInfo();
  //   this.getSupportTypeInfo();
  // },
  methods: {
    getUrl(value) {
        console.log('图片地址是:'+openFileUrl(value))
        return openFileUrl(value)
      },
     getCurrentAccount() {
      var params = {
        userName: this.user.userName,
      };
      findCurrentAccount(params).then((res) => {
        this.userInfo = res.data.data;
      });
    },
    onSearch(val) {
      console.log(val);
    },
    onClickButton() {},
    //获取话题信息
    getAllForumList() {
      var params = {
        userName: this.user.userName,
        listQuery: this.listQuery,
        fromdetaildata: {
          categoryId: this.categoryId,
          topicId: this.topicId,
        },
      };
      findAllForum(params).then((res) => {
        this.loading = true;
        if (res.data.data.content.length > 0) {
          this.loading = false;
          this.forumList = this.forumList.concat(res.data.data.content);
          this.totalPages = res.data.data.totalPages;
        } else {
          this.loading = false;
        }
        if (this.totalPages > this.listQuery.page) {
          this.listQuery.page += 1;
        } else {
          this.finished = true;
        }
      });
    },
    onLoad() {
      this.loading = true;
      this.getAllForumList();
    },
    //获取评论类型信息
    getCommentTypeInfo() {
      var params = {
        userName: this.user.userName,
        dictType: "COMMENT_TYPE",
      };
      queryByType(params).then((res) => {
        var commentTypeInfo = res.data.data;
        for (var i = 0; i < commentTypeInfo.length; i++) {
          if (commentTypeInfo[i].value == "评论") {
            this.commentTypeInfo1 = commentTypeInfo[i];
          } else if (commentTypeInfo[i].value == "回复") {
            this.commentTypeInfo2 = commentTypeInfo[i];
          }
        }
      });
    },
    //获取点赞类型信息
    getSupportTypeInfo() {
      var params = {
        userName: this.user.userName,
        dictType: "SUPPORT_TYPE",
      };
      queryByType(params).then((res) => {
        var supportTypeInfo = res.data.data;
        for (var i = 0; i < supportTypeInfo.length; i++) {
          if (supportTypeInfo[i].value == "content") {
            this.supportTypeInfo1 = supportTypeInfo[i];
          } else if (supportTypeInfo[i].value == "comment") {
            this.supportTypeInfo2 = supportTypeInfo[i];
          }
        }
      });
    },
    //创建或删除点赞
    giveLike(item) {
      if (item.isSupport) {
        this.removeContentSupport(item, 0);
      } else {
        if (item.isOppose) {
          Notify({ type: "warning", message: "点踩后不可点赞！" });
        } else {
          this.createContentSupport(item, 0);
        }
      }
    },
    //创建或删除点踩
    stepOn(item) {
      if (item.isOppose) {
        this.removeContentSupport(item, 1);
      } else {
        if (item.isSupport) {
          Notify({ type: "warning", message: "点赞后不可点踩！" });
        } else {
          this.createContentSupport(item, 1);
        }
      }
    },
    //创建或删除评论的点赞
    giveCommentLike(item) {
      if (item.isSupport) {
        this.removeCommentSupport(item, 0);
      } else {
        this.createCommentSupport(item, 0);
      }
    },
    //创建点赞或点踩
    createContentSupport(item, type) {
      var params = {
        userName: this.user.userName,
        toContent: item.id, //点赞的内容或评论id
        typeId: this.supportTypeInfo1.id, //点赞类型id
        typeName: this.supportTypeInfo1.name, //点赞类型名称
        isOppose: type, //0：点赞，1：点踩
      };
      supportCreate(params).then((res) => {
        if (res.errcode == 200) {
          var title = "";
          if (type == 0) {
            title = "点赞成功！";
            item.isSupport = true;
            item.supportVO.isSupport = parseInt(item.supportVO.isSupport) + 1;
          } else {
            title = "点踩成功！";
            item.isOppose = true;
            item.supportVO.isOppose = parseInt(item.supportVO.isOppose) + 1;
          }
          Notify({ type: "success", message: title });
        }
      });
    },
    //删除点赞或点踩
    removeContentSupport(item, type) {
      var params = {
        userName: this.user.userName,
        toContent: item.id, //点赞的内容或评论id
        typeId: this.supportTypeInfo1.id, //点赞类型id
        typeName: this.supportTypeInfo1.name, //点赞类型名称
        isOppose: type, //0：点赞，1：点踩
      };
      deleteSupport(params).then((res) => {
        if (res.errcode == 200) {
          var title = "";
          if (type == 0) {
            title = "取消点赞成功！";
            item.isSupport = false;
            item.supportVO.isSupport = parseInt(item.supportVO.isSupport) - 1;
          } else {
            title = "取消点踩成功！";
            item.isOppose = false;
            item.supportVO.isOppose = parseInt(item.supportVO.isOppose) - 1;
          }
          Notify({ type: "success", message: title });
        }
      });
    },
    //创建评论点赞
    createCommentSupport(item, type) {
      var params = {
        userName: this.user.userName,
        toContent: item.id, //点赞的内容或评论id
        typeId: this.supportTypeInfo2.id, //点赞类型id
        typeName: this.supportTypeInfo2.name, //点赞类型名称
        isOppose: type, //0：点赞，1：点踩
      };
      supportCreate(params).then((res) => {
        if (res.errcode == 200) {
          var title = "";
          if (type == 0) {
            title = "点赞成功！";
            item.isSupport = true;
            item.supportVO.isSupport = parseInt(item.supportVO.isSupport) + 1;
          } else {
            title = "点踩成功！";
            item.isOppose = true;
            item.supportVO.isOppose = parseInt(item.supportVO.isOppose) + 1;
          }
          Notify({ type: "success", message: title });
        }
      });
    },
    //删除评论点赞
    removeCommentSupport(item, type) {
      var params = {
        userName: this.user.userName,
        toContent: item.id, //点赞的内容或评论id
        // typeId: this.supportTypeInfo2.id, //点赞类型id
        // typeName: this.supportTypeInfo2.name, //点赞类型名称
        isOppose: type, //0：点赞，1：点踩
      };
      deleteSupport(params).then((res) => {
        if (res.errcode == 200) {
          var title = "";
          if (type == 0) {
            title = "取消点赞成功！";
            item.isSupport = false;
            item.supportVO.isSupport = parseInt(item.supportVO.isSupport) - 1;
          } else {
            title = "取消点踩成功！";
            item.isOppose = false;
            item.supportVO.isOppose = parseInt(item.supportVO.isOppose) - 1;
          }
          Notify({ type: "success", message: title });
        }
      });
    },
    //跳转到详情页面
    getDetail(id,categoryName,index) {
       console.log(index+'所选择的第几个');
      this.$router.push({
        path: "/newcolordetail",
        query: { itemId: id ,title:this.titleType},
      });
    },
    //处理转义字符
    htmlDecode(str) {
      var arrEntities = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: '"' };
      return str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function (all, t) {
        return arrEntities[t];
      });
    },
    showChatPopView(index){
      this.showChatPop=true;
      this.chatinfos=''
      this.anonymous=false
      this.choseIndex=index
      this.show1ChatPop=false;
      this.chat1infos=''
    },
    show1ChatPopView(index,chosecommentIndex){
      this.show1ChatPop=true;
      this.chat1infos=''
      this.anonymous=false
      this.choseIndex=index
      this.chosecommentIndex=chosecommentIndex
      this.showChatPop=false;
      this.chatinfos=''
    },
    tosubmint(anonymous,content,typeId,typeName){
      var params = {
        userName: this.user.userName,
        appDecision: {
          anonymous:!anonymous,
          content:content,
          parentId:this.forumList[this.choseIndex].id,
          typeId:typeId,
          typeName:typeName
        },
      };
      console.log(this.choseIndex+'所选择的第几个');
      create(params).then((res) => {
        Notify({type:'success', message:'评论成功'})
        this.showChatPop=false;
        this.chatinfos=''
        this.anonymous=false
        var data={};
        data.typeName='评论'
        console.log('AAAAA'+anonymous+"nickname"+this.userInfo.nickname+'name'+this.userInfo.name)
        data.content=content
        data.isSupport=false
        if (anonymous==true){
          data.nickname=this.userInfo.name
        }else{
          data.nickname=this.userInfo.nickname
        }
        data.supportVO={};
        data.supportVO.isSupport=0
        this.forumList[this.choseIndex].comments.push(data);
        this.forumList[this.choseIndex].commentCount=this.forumList[this.choseIndex].commentCount+1;
      });
    },
    // tosubmint2(anonymous,chat1infos,commentItem,commentTypeInfo2.id,'回复')"
    tosubmint2(anonymous,content,typeId,typeName){
      var params = {
        userName: this.user.userName,
        appDecision: {
          anonymous:!anonymous,
          content:content,
          parentId:this.forumList[this.choseIndex].comments[this.chosecommentIndex].id,
          rootId:this.forumList[this.choseIndex].comments[this.chosecommentIndex].typeName == '评论'?this.forumList[this.choseIndex].comments[this.chosecommentIndex].id:this.forumList[this.choseIndex].comments[this.chosecommentIndex].rootId,
          toName:this.forumList[this.choseIndex].comments[this.chosecommentIndex].creator,
          typeId:typeId,
          typeName:typeName
        },
      };
      create(params).then((res) => {
        Notify({type:'success', message:'回复成功'})
        this.show1ChatPop=false;
        this.chat1infos=''
        this.anonymous=false
        var data={};
         console.log('BBBB'+anonymous)
        if (anonymous==true){
          data.nickname=this.userInfo.name
        }else{
          data.nickname=this.userInfo.nickname
        }
        data.typeName='回复'
        data.fromTo=this.forumList[this.choseIndex].comments[this.chosecommentIndex].nickname
        data.content=content
        data.isSupport=false
        data.supportVO={};
        data.supportVO.isSupport=0
        this.forumList[this.choseIndex].comments.push(data);
        this.forumList[this.choseIndex].commentCount=this.forumList[this.choseIndex].commentCount+1;
      });
    }
  },
};
</script>
<style>
.content {
  height: 100vh;
  font-size: 14px;
}
.mainList {
  width: 100%;
}
.van-search .van-search__content {
  border-radius: 0.42rem;
  height: 0.84rem;
  line-height: 0.84rem;
  border: 1px solid #f76e20;
  background-color: #fff;
}
.searchBtn {
  width: 1.5rem;
  height: 0.84rem;
  background-color: #e99d42;
  text-align: center;
  color: #fff;
  font-size: 0.55rem;
  margin-left: -1.7rem;
  border-radius: 0.42rem;
}
.van-search__action:active {
  background-color: #fff;
}
.row {
  display: flex;
  padding: 0.25rem 0.25rem;
  align-items: center;
}
.lCol {
  width: 1.2rem;
}
.rCol {
  widows: calc(100% - 1.4rem);
  color: #aaaaaa;
}
.infoBoxList {
  margin-left: 1.2rem;
  padding: 0 0.25rem;
}
.infoBoxList .infoTitle {
  line-height: 0.55rem;
  font-weight: normal !important;
  font-size: 14px !important;
  font-family: none !important;
}
.infoBoxList .infoTitle strong ,
.infoBoxList .infoTitle h1,
.infoBoxList .infoTitle h2, 
.infoBoxList .infoTitle h3, 
.infoBoxList .infoTitle h4, 
.infoBoxList .infoTitle h5, 
.infoBoxList .infoTitle h6 ,
.infoBoxList .infoTitle b ,
.infoBoxList .infoTitle span{
  font-weight: normal !important;
  font-size: 14px !important;
  font-family: none !important;
}
.iconRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #aaaaaa;
  margin-top: 0.1rem;
}
.iconRow .iconCol {
  display: flex;
  align-items: center;
}
.moreBtn {
  margin: 0.25rem 0;
}
.commentList {
  margin-top: 10px;
}
.commentRow {
  display: flex;
  align-items: center;
  color: #aaaaaa;
  justify-content: space-between;
  line-height: 0.55rem;
}
.commentRow .lText {
  /* display: inline-flex;
  align-items: start;
  flex-wrap:wrap */
  word-break: break-all;
}
.commentRow .rIcon {
  display: flex;
  align-items: center;
  text-align: left;
}
/* .commentContent {
  word-break: break-all;
  display: inline-flex;
  align-items: center;
} */
.ml2 {
  margin-left: 0.2rem;
}
.mt2 {
  margin-top: 0.12rem;
}
.colorOrange {
  color: #f76e20;
}
.noemalText{
  color: #aaaaaa;
}
</style>